<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"></meta>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"></meta>
  <title>角色管理</title>
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"></meta>
</head>
<body class="hold-transition skin-blue sidebar-mini" style="background:#ecf0f5;">
<!--标题-->
<section class="content-header">
  <h1>
    管理系统
    <small>角色管理</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
    <li><a href="#">系统管理</a></li>
    <li class="active">角色管理</li>
  </ol>
</section>

<!--内容-->
<section class="content">
  <div class="box box-default">
    <div class="box-header with-border">
      <div class="row">
        <div class="col-md-12">

          <div class="form-inline">
            <div class="form-group">
              <label>角色名称：</label>
              <input id="roleName" type="text" class="form-control" placeholder="请输入角色名称"></input>
            </div>
            <div class="form-group">
              <label>状态：</label>
              <input class="easyui-switchbutton" onText="有效" offText="无效" id="statusCdTxt"></input>
            </div>
            <button id="searchRoleBtn" class="btn btn-border"><i class="fa fa-search"></i> 查询</button>
            <button class="btn btn-border" id="addRoleBtn"><i class="fa fa-plus"></i> 新增</button>
            <button id="batchDelBtn" class="btn btn-info" ><i class="fa fa-window-restore"></i> 更改角色状态 </button>
          </div>

        </div>
      </div>
    </div>
    <div class="box-body">
      <div class="col-sm-12 myTable noLeftPadding noRightPadding">
        <table id="roleListTb" class="table table-bordered table-striped">
          <thead>
          <tr>
            <th>序号</th>
            <th>角色编码</th>
            <th>角色名称</th>
            <th class="fontCenter">状态</th>
            <th class="fontCenter">操作</th>
          </tr>
          </thead>
          <tbody>
          <tr>
            <td>001</td>
            <td>10001</td>
            <td>张三</td>
            <td class="fontCenter">10</td>
            <td class="fontCenter">
              <a href="javascript:;" data-toggle="modal" data-target="#setMenuModal">设置菜单</a>
              <a href="javascript:;" data-toggle="modal" data-target="#AddEditModal">修改</a>
              <a href="javascript:;">删除</a>
            </td>
          </tr>
          <tr>
            <td>001</td>
            <td>10001</td>
            <td>张三</td>
            <td class="fontCenter">10</td>
            <td class="fontCenter">
              <a href="javascript:;" data-toggle="modal" data-target="#setMenuModal">设置菜单</a>
              <a href="javascript:;" data-toggle="modal" data-target="#AddEditModal">修改</a>
              <a href="javascript:;">删除</a>
            </td>
          </tr>
          <tr>
            <td>001</td>
            <td>10001</td>
            <td>张三</td>
            <td class="fontCenter">10</td>
            <td class="fontCenter">
              <a href="javascript:;" data-toggle="modal" data-target="#setMenuModal">设置菜单</a>
              <a href="javascript:;" data-toggle="modal" data-target="#AddEditModal">修改</a>
              <a href="javascript:;">删除</a>
            </td>
          </tr>
          <tr>
            <td>001</td>
            <td>10001</td>
            <td>张三</td>
            <td class="fontCenter">10</td>
            <td class="fontCenter">
              <a href="javascript:;" data-toggle="modal" data-target="#setMenuModal">设置菜单</a>
              <a href="javascript:;" data-toggle="modal" data-target="#AddEditModal">修改</a>
              <a href="javascript:;">删除</a>
            </td>
          </tr>
          </tbody>
        </table>
        <div class="myPage">
          <div id="page"></div>
        </div>
      </div>
    </div>
  </div>
</section>
<div class="control-sidebar-bg"></div>


<!--增加修改-->
<div class="modal fade" id="AddEditModal"  role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel1">增加角色</h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal">
          <div class="box-body">
            <div class="form-group">
              <label class="col-sm-3 control-label">角色名称：</label>
              <div class="col-sm-9">
                <input id="roleNameTxt" type="text" class="form-control" placeholder="请输入角色名称"></input>
              </div>
            </div>
            <div class="form-group">
              <label class="col-sm-3 control-label">角色描述：</label>
              <div class="col-sm-9">
                <input id="descriptionTxt" type="text" class="form-control" placeholder="请输入角色描述"></input>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button id="ensureBtn" type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>


<!--设置菜单-->
<div class="modal fade" id="setMenuModal" >
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">菜单选择</h4>
      </div>
      <div class="modal-body">
        <!--内容开始-->
        <div class="row">
          <div class="col-xs-12">
            <div class="box">
              <div class="box-header with-border">
                <h3 class="box-title">用户****菜单设置</h3>
              </div>
              <div class="box-body">

                <div class="col-sm-12">
                  <div class="treeMenu">
                    <ul id="menuManageTree" class="treeview-gray"  checkbox="true">
                      <li><span><input type="checkbox" class="minimal"> 系统管理</input></span>
                        <ul>
                          <li><span><input type="checkbox" class="minimal" checked="checked"> 用户管理</input></span></li>
                          <li><span><input type="checkbox" class="minimal"> 角色管理</input></span></li>
                          <li><span><input type="checkbox" class="minimal"> 密码管理</input></span></li>
                        </ul>
                      </li>
                    </ul>
                  </div>
                </div>

              </div>
            </div>
          </div>
        </div>
        <!--内容结束-->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button id="menuEnsureBtn" type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

</body>

<script th:src="@{/js/pub-lib/jquery.min.js}"></script>
<script th:src="@{/js/pub-lib/bootstrap.min.js}"></script>
<script th:src="@{/js/pub-lib/jquery.slimscroll.min.js}"></script>
<script th:src="@{/js/pub-lib/simplePagination.js}"></script>
<script th:src="@{/js/pub-lib/jquery/jquery.cookie.js}"></script>
<script th:src="@{/js/pub-lib/jquery/jquery.treeview.js}"></script>
<script th:src="@{/js/pub-lib/icheck.min.js}"></script>
<script th:src="@{/js/pub-lib/select2.full.min.js}"></script>
<script th:src="@{/js/pub-lib/plugins/easyui/jquery.easyui.min.js}"></script>
<script th:src="@{/js/pub-lib/plugins/toastr/toastr.min.js}"></script>
<script type="text/javascript" src="../js/pub-lib/plugins/bootstrap-validator/bootstrapValidator.min.js"></script>
<script type="text/javascript" src="../js/pub-lib/plugins/jqueryConfirm/jquery-confirm.min.js"></script>
<script th:src="@{/js/our-lib/systemmanage/roleManage.js}"></script>
</html>
